<template>
	<div class="prize_area_item">
		<!-- <div class="prize_area_item_container"> -->
			<!-- <img :src="imageSource" alt="Image 1" class="img"> -->
			<slot name="prize_area_item_state"></slot>
			<slot name="prize_area_item_img"></slot>
			<slot name="prize_area_item_desc"></slot>
		<!-- </div> -->
	
	</div>
</template>

<script>
	export default {
		data() {
			return {
				imageName: 'purchase_prize_goods1.png',
				stateName: 'wait_draw.png',
			}
		},
		props: {
			imgName: String,
			stateName: String,
		},
		computed: {
			imageSource() {
				return  require('@/assets/' + this.imgName);
			},

		},
	}
</script>
import {
		Progress,
	} from 'vant';
<style>
	
	.prize_area_item {
		/* flex: 0 0 49%; */
		/* flex: 1; */
		margin-top: 0.5rem;
		flex:0 1 auto;
		/* 设置具体的宽度，也可以调整这个值 */
		height: 25rem;
		width: calc((100% - 0.5rem ) / 2);
/* 		min-width: calc((100% - 0.5rem ) / 2);
		max-width: calc((100% - 0.5rem ) / 2); */
		/* margin-bottom: 0.5rem; */
	/* margin-left: 0.1rem; */
		/* padding: 1.5rem; */
		/* border: 1px solid #ccc; */
		background-color: white;
		/* text-align: center; */
		overflow: hidden;
		/* 可以通过隐藏超出的部分来处理 */
		box-sizing: border-box;
		/* 保持 padding 不会撑大容器 */
		border-radius: 25px;
	/* 	margin-left: 0.5rem;
		margin-right: 0.5rem; */
		margin-bottom: 0.5rem;
	}
	
	
	.prize_area_item_container {
		/* max-width: 100%; */
		/* 使图片充满父元素的宽度 */
		max-width: 100%;
		max-height: 100%;
		/* 设置图片的最大高度，可以根据需要调整 */
		/* height: auto; */
		/* 保持图片比例 */
		display: block;
		/* 去掉图片底部的空隙 */
		margin-bottom: 2rem;
		/* background-color: rebeccapurple; */
		/* 设置图片和文字之间的间距 */
	
	}
	
	.prize_area_item_container img {
		max-width: 100%;
		height: auto;
		object-fit: cover;
		/* 保持宽高比例并填充整个容器 */
	}
	
	.prize_area_item_container_text0 {
		position: relative;
		font-size: 1rem;
		font-family: 'PingFang SC';
		/* text-align: left; */
		left: 0.5rem;
/* 		background: linear-gradient(to right, #FE1B2E, #FF2291);
		-webkit-background-clip: text;
		color: transparent;
		position: relative;
		text-align: center;
		top: 80%; */
	}
	.prize_area_item_container_text1 {
		position: relative;
		top: -2.4rem;
		left: 8.3em;
		color: rgb(247, 72, 43);
		font-size: 1rem;
		font-weight: bold;
		font-family: 'PingFang SC';
		line-height:1.5rem;
		
	}
	.prize_area_item_container_text2 {
		line-height:1.5rem;
		position: relative;
		top: -3rem;
		font-family: 'PingFang SC';
		font-weight: bolder;
		font-size: 1.2rem;
		left: 0.5rem;
	}
	
	.vanprogress {
		position: relative;
		top: -3rem;
		left: 0.5rem;
		width:10rem;
	}
	.prize_area_item_container_text3 {
		position: relative;
		font-family: 'PingFang SC';
		color: #747474;
		left: 0.5rem;
		top: -3rem;
		/*font-weight: bold;*/
		font-size: 0.8rem;
		
	}
	.prize_area_item_container_text4 {
		position: relative;
		font-family: 'PingFang SC';
		color: #8C8C8C;
		left: 0.5rem;
		top: -3.5rem;
		font-size: 0.8rem;
	}
	
	.status {
		background-color: #F4C8BF;
		height: 2rem;
		width: 11rem;
		top: -10rem;
		left: -3rem;
		border-radius:15px;
	}
	
	.status_img {
		width: 2rem;
		height: 2rem;
	}
	
	.status_text {
		position: relative;
		color: #683C33;
		top: -2.5rem;
		left: 2rem;
		/* background-color: blue; */
		font-family: 'PingFang SC';
		font-size: 0.8rem;
		font-weight: bold;
		
	}
	
</style>